<template>
    <div id="reset-main">

        <!-- 重置密码界面 -->
        <div id="reset">
            <p style="text-align:left;font-size:22px;">Hi , {{toMail}}</p>
            请输入您的新密码进行重置操作 <p v-if="show" style="float:right">{{count}}s 后跳转</p> 
            <el-form :model="reset" :rules="resetRules" ref="reset" >
                <el-form-item  prop="pwd">
                    <el-input type="password" prefix-icon='el-icon-lock' 
                        v-model="reset.pwd"  placeholder="新密码"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item  prop="pwda">
                    <el-input type="password" prefix-icon='el-icon-lock' 
                        v-model="reset.pwda"  placeholder="确认密码"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button id="loginBtn"  style="width:100%" :loading="loading" 
                        type="primary" @click="resetPwd('reset')">{{ loading ? '重 置 中 ...' : '重 置 密 码' }}</el-button>
                </el-form-item> 
            </el-form>
        </div>
        
    </div>

</template>

<script>

export default {
    
    mounted() {
        let p = this.$route.query.p;
        let email = this.$route.query.email;
        if(p !== undefined && email !== undefined) {
            this.toMail = email;
            this.param = p;
        }
        
    },
    data() {
        let validConfirmPwd = (rule, value, callback) => {
            if(!value) {
                return callback(new Error('请输入确认密码'));
            }
            if(this.reset.pwd !== value){
                return callback(new Error('两次输入密码不一致'));
            }
            callback();
        };
        return {
            
            toMail:'system@mmc.com',
            param:'',
            loading: false,
            show: false,
            count:5,
            reset:{
                pwd:'',
                pwda:''
            },
            resetRules:{
                pwd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度为 6 到 20 个字符', trigger: 'blur'  }
                ],
                pwda: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { validator: validConfirmPwd, trigger: 'blur'}
                ]
            }

        }
    },
    methods: {
        // 重置密码
        resetPwd(resetData) {
            this.$refs[resetData].validate((valid) => {
                let reset = this.$refs[resetData].model;
                if(valid) {
                    this.loading = true;
                    this.$api.post('/user/reset/pwd',{
                        email: this.toMail,
                        param: this.param,
                        pwd: reset.pwda
                    }).then(response => {
                        let result = response.data;
                        this.loading = false;
                        if(result.code === 200){
                            this.$notify.success({
                                title: '重置密码成功',
                                message: '5s 后将跳转至登录页'
                            });
                            // setTimeout(() => {
                            //     this.$router.push('/login');
                            // }, 5000);
                            this.show = true;
                            let time = setInterval(() => {
                                this.count --;
                                if(this.count === 0) {
                                    this.$router.push('/login');
                                    clearInterval(time);
                                    this.count === 5;
                                }

                            },1000);
                        } else {
                            this.$notify.error({
                                title: '重置密码失败',
                                message: result.message
                            });
                        }

                    }).catch(error => {
                        this.loading = false;
                        this.$notify.error({
                            title: '重置密码失败',
                            message: error.message
                        })
                    });
                }
            })
        }
    }
    
}
</script>

<style scoped>
    #reset-main{
        background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;/*实现水平居中*/
        align-items:center; /*实现垂直居中*/
    }
    #reset{
        width: 20%;
    }
</style>